<template>
  <div class="shop-cart-item">
    <el-checkbox v-model="checked" size="large" />
    <el-image class="image" :src="good.image" fit="contain" />
    <div class="good-info">
      <div class="font">{{ good.name }}</div>
      <div class="font">{{ good.description }}</div>
      <div class="tags">
        <el-tag size="small" style="margin-left: 5px" v-for="tag in good.tags">{{ tag }}</el-tag>
      </div>
    </div>
    <div class="more-info">
      <div class="consume font">
        <div class="price">￥{{ decimalPointSave(good.price) }}</div>
        <div class="integral">∫{{ decimalPointSave(good.integral) }}</div>
      </div>
      <div class="font">营业单位：{{ good.identity }}</div>
    </div>
    <div class="total">
      <el-input-number v-model="num" :min="1" :max="99" size="small" />
      <div class="total-consume">
        <span style="color: black">合计：</span>
        <div class="price">￥{{ decimalPointSave(good.price * num) }}</div>
        <div class="integral" style="margin-left: 10px">
          ∫{{ decimalPointSave(good.integral * num) }}
        </div>
      </div>
    </div>
    <div class="delete">
      <el-popconfirm title="从购物车中删除?" @confirm="deleteGood">
        <template #reference>
          <el-icon><Delete /></el-icon>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script setup>
import { deleteGoodFromCart } from '@/api/shop'
import { decimalPointSave } from '@/utils/strutils'
import { ref, watch } from 'vue'

const props = defineProps({
  obj: Object,
  checked: Boolean,
  index: Number,
})

const emit = defineEmits(['change', 'delete'])

// 监听全选
watch(
  () => props.checked,
  (newValue, oldValue) => {
    checked.value = newValue
  },
)

const good = props.obj

const checked = ref(true)

const num = ref(1)

// 监听是否选中或取消选中
watch([num, checked], () => {
  changeNumOrCheck()
})

// 更改数量或选中状态
const changeNumOrCheck = () => {
  const index = props.index
  const price = good.price * num.value
  const integral = good.integral * num.value
  const obj = checked.value
    ? { checked: checked.value, index: index, id: good.id, price, integral, number: num.value }
    : { checked: checked.value, index: index, id: good.id, price: 0, integral: 0 }
  emit('change', obj)
}

changeNumOrCheck()

// 从购物车删除
const deleteGood = async () => {
  const res = (await deleteGoodFromCart(good.id)).data
  if (res.success) {
    ElNotification({
      title: '成功',
      message: '删除成功',
      type: 'success',
    })
    emit('delete')
  } else {
    ElNotification({
      title: '失败',
      message: '删除失败',
      type: 'error',
    })
  }
}
</script>

<style scoped less="scss">
.shop-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;

  position: relative;

  width: 95%;
  height: 85px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.5s;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;

  .el-checkbox {
    margin-left: 10px;
  }

  .image {
    width: 100px;
    max-height: 80px;
  }

  .font {
    font-size: 14px;
    color: grey;
  }

  .good-info {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: start;

    .tags {
      display: flex;
      margin-bottom: 3px;
    }
  }

  .more-info {
    margin-left: 50px;

    .consume {
      display: flex;
      gap: 10px;
    }
  }

  .total {
    display: flex;
    flex-direction: column;

    position: absolute;
    right: 0%;

    .total-consume {
      display: flex;

      width: 300px;

      font-size: 16px;
      color: rgb(255, 147, 41);
    }
  }

  .delete {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;

    right: 0%;
    height: 100%;
    width: 50px;
    background-color: rgb(212, 54, 54);
    color: white;
  }
}

.shop-cart-item:hover {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
</style>
